<template>
  <div class="line-chart">
    <!-- <div class="title">{{headTitle}}</div> -->
    <div :id="chartId"
         :style="{width: `${width}px`, height: `${width}px`}"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
export default {
  name: "envCompliance",
  props: {

    chartId: {
      type: String,
      default: "chartId"
    },
    percentage: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: "#000"
    },
    title: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      chart: null,
      width: 200,//圆圈大小
      titleFontSize: 36
    };
  },
  watch: {
    percentage: {
      deep: true,
      handler(val) {
        this.setOptions();
      }
    },
    timeData: {
      deep: true,
      handler(val) {
        this.setOptions();
      }
    }
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resizeHandler() {
      if (window.innerWidth <= 1670) {
        this.width = 150
        this.titleFontSize = 28
      } else {
        this.width = 200
        this.titleFontSize = 36
      }
      this.chart.resize();
      this.setOptions();
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId));
      this.setOptions();
    },
    setOptions() {

      var option = {
        title: {
          show: true,
          text: `${this.percentage}%`,
          x: "center",
          y: "center",// 通过x,y将标题(进度)定位在圆环中心
          textStyle: {
            fontSize: this.titleFontSize,
            color: '#0a0a0a',
            fontWeight: "400",
          },
          itemGap: 0,
          subtext: this.title,
          subtextStyle: {
            fontSize: "12",
            color: "#707070",
            fontWeight: "400",
            verticalAlign: "top"
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["65%", "85%"],
            startAngle: 90,//起始角度，支持范围[0, 360]。
            z: 0,
            zlevel: 0,
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 100,
                name: "",
                itemStyle: {
                  color: "#e5e9f2",
                  // borderColor:"#eed",
                  // shadowColor: '#2AB296',
                  // shadowBlur: 40,

                  //   borderRadius: 80,
                },
              },
              // {
              //   value: 100,
              //   name: "",
              //   itemStyle: {
              //     color: "#ccc",//透明色，也可以设置把其他颜色
              //   },
              // },
            ],
          },
          {
            name: "",
            type: "pie",
            radius: ["65%", "85%"],
            startAngle: 90,//起始角度，支持范围[0, 360]。
            z: 1,
            zlevel: 1,
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: this.percentage,
                name: this.title,
                itemStyle: {
                  color: this.color,
                  shadowColor: this.color,
                  shadowBlur: 15,
                  borderRadius: [20],
                },
              },
              {
                value: 100 - this.percentage,
                name: "",
                itemStyle: {
                  color: "transparent",//透明色，也可以设置把其他颜色
                },
              },
            ],
          },
        ]
      };
      this.chart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.line-chart {
  display: flex;
  .title {
    width: 80px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    color: #0a0a0a;
  }
}
</style>
